/*
HashRouter:有#号
BrowserRouter:没有#号
Route：设置路由与组件关联
Switch:只要匹配到一个地址不往下匹配，相当于for循环里面的break
Link:跳转页面，相当于vue里面的router-link
exact :完全匹配路由
Redirect:路由重定向
*/
import React,{Suspense} from "react";
import {BrowserRouter } from "react-router-dom";
import RouterWaiter from 'react-router-waiter' // 路由统一管理 及 路由拦截

//PC移动切换
import MediaQuery from 'react-responsive';
//加载页面动画
import Loading from "./Loading";
//赖加载页面组件
import routeConfig from "./routesConfig";
import onRouteBefore from './onRouteBefore'

function RouterComponent() {
    return (
        <React.Fragment>
            <BrowserRouter >
                {/*basename="/asd" */}
                <MediaQuery  minWidth={751}>
                    <Suspense >
                        <RouterWaiter
                            routes = {routeConfig.Pc}
                            onRouteBefore = {onRouteBefore}
                            loading = {<Loading />}
                        />
                        {/*<Routes>*/}
                        {/*    {*/}
                        {/*        routeConfig.Pc.map((item,index)=>{*/}
                        {/*            return(*/}
                        {/*                <Route*/}
                        {/*                    exact={item.exact}*/}
                        {/*                    path={item.path}*/}
                        {/*                    element={<item.element />}*/}
                        {/*                    key={index}*/}
                        {/*                />*/}
                        {/*            )*/}
                        {/*        })*/}
                        {/*    }*/}
                        {/*</Routes>*/}
                    </Suspense>
                </MediaQuery>
                <MediaQuery  maxWidth={750}>
                    <Suspense >
                        <RouterWaiter
                            routes = {routeConfig.Mobile}
                            onRouteBefore = {onRouteBefore}
                            loading = <Loading />
                        />
                        {/*<Routes>*/}
                        {/*    {*/}
                        {/*        routeConfig.Mobile.map((item,index)=>{*/}
                        {/*            return(*/}
                        {/*                <Route*/}
                        {/*                    exact={item.exact}*/}
                        {/*                    path={item.path}*/}
                        {/*                    element={<item.element />}*/}
                        {/*                    key={index}*/}
                        {/*                />*/}
                        {/*            )*/}
                        {/*        })*/}
                        {/*    }*/}
                        {/*</Routes>*/}
                    </Suspense>
                </MediaQuery>
            </BrowserRouter>
        </React.Fragment>
    );
}

export default RouterComponent;
